import React, { useState } from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, CartCircleO, SettingO } from '@react-vant/icons'
import { useNavigate, useLocation } from 'react-router-dom'

/* 底部导航栏组件 */
export default function Tabbars() {

    /* 底部导航栏数据 */
    const tabbarlist = [
        { id: 1, path: '/home', title: '首页', icon: <HomeO /> },
        { id: 2, path: '/car', title: '水果及时送达', icon: <CartCircleO /> },
        { id: 3, path: '/shoplist', title: '生鲜次日送达', icon: <SettingO /> },
        { id: 4, path: '/my', title: '我的', icon: <FriendsO /> },
    ]

    let location = useLocation()
    let navigate = useNavigate()
    let [change, setChange] = useState(location.pathname)

    return (
        /* 标签栏组件 */
        <div>
            <div className='demo-tabbar'>
                <Tabbar value={change} onChange={(e:any) => {
                    navigate(e) //跳转
                    setChange(e)//高亮
                }}>
                    {
                        tabbarlist.map(item => {
                            return <Tabbar.Item key={item.id} icon={item.icon} name={item.path}>
                                {item.title}
                            </Tabbar.Item>
                        })
                    }
                </Tabbar>
            </div>
        </div>
    )
}
